<style lang="less">
    @import './page.less';
</style>
<template>
  <div class="div-center">
      <Page
        transfer
        :total="totalSize"
        :current="pageNumber"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePageNumber" 
        @on-page-size-change="changePageSize"
        placement="top"
        show-total
        show-elevator 
        show-sizer>
      </Page>
  </div>
</template>

<script>
    export default {
        components: {
        },
        props: {
            totalSize: {
                type: Number,
                default: 0
            },
            pageNumber: {
                type: Number,
                default: 1
            },
            pageSize: {
                type: Number,
                default: 10
            },
            pageSizeOpts: {
                type: Array,
                default: [10, 20, 30, 40]
            }
        },
        data () {
            return {
            }
        },
        methods: {
            changePageNumber (pageNumber) {
                this.$emit('changePageNumber', pageNumber)
            },
            changePageSize (pageSize) {
                this.$emit('changePageSize', pageSize)
            }
        }
    }
</script>
